<script setup>
import { toRefs } from 'vue'
import { storeToRefs } from 'pinia'
import { useMusicStore } from '../../../store/music'
import { musicLevel } from '../../../common/index'
import PlayIcon from "../../../components/PlayIcon.vue";

const musicStore = useMusicStore()
const { playMusic } = storeToRefs(useMusicStore())

const props = defineProps({
  item: {
    type: Object,
    default() {
      return {}
    }
  }
})
const { item } = toRefs(props)

const handleMusic = () => {
  musicStore.selectSongPlay(item.value.song)
}
</script>

<template>
  <div class="song-box" @click="handleMusic">
    <img class="song-img" :src="item.picUrl" alt="picUrl" />
    <div class="song-info">
      <span class="song-name">{{ item.name }}</span>
      <div class="song-i">
        <span class="music-level">{{ musicLevel(item.song.privilege.downloadMaxBrLevel).name }}</span>
        <span v-if="item.song.mvid" class="music-mv">MV<span class="iconfont icon-bofang"></span></span>
        <span v-for="(n , index) in item.song.artists" :key="n.id" class="m-artist">
          {{ n.name + (index+1!==item.song.artists.length?'/':'') }}
        </span>
      </div>
    </div>
    <play-icon v-if="playMusic.id === item.song.id"/>
  </div>
</template>

<style scoped lang="scss">
.song-box {
  width: 100%;
  height: 70px;
  color: #000;
  display: flex;
  align-items: center;
  margin: 24px 0;
  cursor: pointer;
}
.song-img {
  width: 70px;
  height: 70px;
  border-radius: 8px;
}
.song-info {
  flex: 1;
  height: 70px;
  text-align: left;
  margin-left: 8px;
  display: flex;
  flex-direction: column;
}
.song-i {
  margin-top: 2px;
}
.song-name {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
}
.music-level {
  border: 1px solid #FFD700;
  color: #FFD700;
  border-radius: 2px;
  padding: 1px 2px;
  font-size: 10px;
  letter-spacing: 1px;
  margin-right: 4px;
}
.music-mv {
  border: 1px solid #FF4136;
  color: #FF4136;
  border-radius: 2px;
  padding: 1px 2px;
  font-size: 10px;
  letter-spacing: 1px;
  margin-right: 4px;
  .iconfont {
    font-size: 10px;
  }
}
.m-artist {
  font-size: 12px;
  letter-spacing: 1px;
}
</style>
